<template>
  <div class="gallery_effect">
    <div align="left" class="gallery-van-tab-a">
      <div class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in drawingList">
        <van-image :src="item.galleryInfoPic" fit="cover" height="10rem" width="10rem" @click="showOverlay(item.galleryInfoId,item.courseType)"></van-image>
        <div class="gallery-van-tab-a-content">
          <div>
            <p align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.galleryInfoTitle}}</p>
          </div>
          <div align="left" class="gallery-van-tab-b-contents">
            <div class="van-tab-b-contents">
              <van-image round width="1.2rem" height="1.2rem" :src="item.licenseUrl" style="position: absolute;"/>
              <span style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</span>
            </div>
            <div class="van-tab-b-contents">

              <van-icon v-if="item.courseType == 0" name="star-o" style="position: absolute" size="16"/>
              <van-icon v-else="item.courseType == 1" style="position: absolute">
                <img class="imgaa" src="../../../assets/wujiaoxin.png" />
              </van-icon>

              <span class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.shoucangshu}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block-text">

          <van-row>
            <van-col span="12">
              <div align="left" style="padding: 0.5rem" >
                <van-icon  @click="fanhui"  name="arrow-left" size="20" color="#ffffff"/>
              </div>
            </van-col>
            <van-col span="12">
              <div class="block-text-share" align="right" style="padding: 0.5rem">
                <van-icon name="share-o" color="#ffffff"/>
              </div>
            </van-col>


          </van-row>







          <div class="block-text-img">
<!--            <van-image :src="this.drawing.galleryInfoPic" fit="cover"height="12rem"  @click="show = true"></van-image>-->
            <img :src="this.drawing.galleryInfoPic" width="100%" height="10rem" @click="show = true" />

          </div>
          <div class="block-text-content" align="left">
            <div class="block-text-content-p">
              <p>{{this.drawing.galleryInfoText}}</p>
              <!--                <p @click="toText()">22查看原文 ></p>-->
            </div>
            <div class="block-text-content-cen">
              <van-row span="8">
                <van-col span="14">
                  <van-field v-model="value" placeholder="添加评论......" @keyup.enter="insertComment" class="block-text-content-cen-input"/>
                </van-col>
                <van-col span="8">
                  <van-row>
                    <van-col span="8">
                      <div align="center" style="padding-top: 0.3rem">
                        <!--                          <div><van-icon name="like-o" color="#ffffff" size="16"/></div>-->
                        <!--                          <div style="font-size: 1rem">{{this.drawing.galleryInfoFabulous}}</div>-->
                      </div>
                    </van-col>
                    <van-col span="8">
                      <div align="center" >
                        <div @click="shoucang">

<!--                          <van-icon v-if="this.courseTypeOne == 0" name="star-o" style="position: absolute" size="28"/>-->
                          <van-icon v-if="this.courseTypeOne == 0" name="star-o" color="#ffffff" size="18"/>
                          <van-icon v-else="this.courseTypeOne == 1" color="#ffffff" size="16">
                            <img class="imgbb" src="../../../assets/wujiaoxin.png" />
                          </van-icon>
                        </div>
                        <div style="font-size: 1rem">{{this.drawing.shoucangshu}}</div>
                      </div>
                    </van-col>
                    <van-col span="8">
                      <div align="center" style="" @click="showPopup">
                        <div><van-icon name="chat-o" color="#ffffff" size="18"/></div>
                        <div style="font-size: 1rem">{{this.drawing.galleryInfoReply}}</div>
                      </div>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </div>
          </div>


        </div>
      </div>
    </van-overlay>

    <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }">
      <div class="block-share">
        <div class="block-share-top">
          <p>全部评论{{this.galleryComment.length}}条</p>
        </div>
        <div class="block-share-list">
          <div class="block-share-list-demo" v-for="comment in galleryComment">
            <img :src="comment.customerInfo.customerHandImage">
            <div class="list-demo-content">
              <div>
                <h3>{{comment.customerInfo.customerName}}</h3>
                <p>{{comment.galleryCommentTime}}</p>
              </div>
              <p style="width: 70%;font-size: 0.7rem">{{comment.galleryCommentText}}</p>
            </div>
            <div class="block-share-list-like">
              <!--                      <van-icon name="like-o"/>-->
              <!--                      <span class="block-share-list-likes" style="font-size: 0.8rem">{{comment.galleryCommentFabulous}}</span>-->
            </div>
          </div>
        </div>
        <div class="block-share-bottom">
          <van-cell-group>
            <van-field v-model="commentText" clearable label="" left-icon="edit" placeholder="评论一下~" center style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem" @keyup.enter="addComment" @click-left-icon="addComment"/>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

  import { collectadd } from "@/api/collection";

  import { Toast } from "vant";
  import {
    selectGalleryInfoListByTypeTwo,
    selectGalleryList,
    selectGalleryById,
    selectGalleryComment,
    insertGalleryComment
  } from "@/api/gallery/gallery.js";

    export default {
      name: "gallery_effect",
      inject:['reload'],
      data(){
        return{
          form:{
            galleryInfoId:'',
          },
          courseTypeOne:'',
          show: false,
          value: '',
          showP: false,
          drawing: Object,
          galleryId: '',
          commentText:'',
          galleryComment: [],
          drawingList : [],
        }
      },
      created() {
        this.getGalleryList();
      },
      methods: {
        fanhui(){
          // this.$router.go(-1);//返回上一层
          this.show = false;
        },

        shoucang(){
          this.form.galleryInfoId = this.galleryId;
          collectadd(this.form).then(res=>{
            this.show = false;

            this.getGalleryList();
          })
        },

        getGalleryList(){
          // selectGalleryList("0").then((res) => {
          //   this.drawingList = res.data.data;
          // });
          selectGalleryInfoListByTypeTwo().then(res=>{
            this.drawingList = res.data.rows;
          })
        },
        showOverlay(galleryInfoId,courseType){
          this.courseTypeOne = courseType
          this.show = true;
          selectGalleryById(galleryInfoId).then((res) => {
            this.galleryId = res.data.data.galleryInfoId;
            this.drawing = res.data.data.galleryInfo;
          });
        },
        showPopup() {
          this.showP = true;
          selectGalleryComment(this.galleryId).then((res) => {
            this.galleryComment = res.data.data;
          });
        },
        toText(){
          this.$router.push({ path:'/original_text',query:{galleryInfoId:this.galleryId}})
        },
        /** 添加评论 */
        addComment(){
          insertGalleryComment(this.galleryId,this.commentText).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        },
        insertComment(){
          insertGalleryComment(this.galleryId,this.value).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        }
      }
    }
</script>

<style scoped>
  .imgaa{
    width: 1.2rem;
    height: 1.2rem;
  }
  .imgbb{
    width: 1.2rem;
    height: 1.2rem;
  }
  .gallery-van-tab-aa{
    padding-bottom: 0.5rem;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
  }
  .gallery-van-tab-aa-block{
    display: inline-block;
    width: 44%;
    position: relative;
    padding : 0.5rem
  }

  .block-text-img{
    margin-top: 5rem;
  }
  .block-text-content-cen-input{
    border-radius: 5rem;
    width: 10rem;
  }
  .block-text-content{
    color: white;
    font-size: 0.6rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 5%;
  }
  .block-text-content-p p{
    padding: 0.3rem 0;
  }

  .block-share {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
    text-align: left;
  }

  .block-share .block-share-top{
    padding-left: 1rem;
    font-weight: 700;
  }

  .block-share .block-share-bottom{
    width: 85%;
    position: fixed;
    bottom: 0rem;
    padding: 0.7rem;
    background-color: white;
  }

  .block-share .block-share-list{
    padding: 1rem 1.5rem;
  }

  .block-share .block-share-list .block-share-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block-share .block-share-list .block-share-list-demo{
    margin-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo{
    padding-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo .block-share-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block-share .block-share-list .block-share-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block-share .block-share-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block-share .block-share-list .list-demo-content div{
    padding-bottom: 0.5rem;
  }
  .block-share .block-share-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block-share .block-share-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-like{
    display: inline-block;
  }
</style>
